<template>
  <div>
    <div style="margin-bottom:20px;margin-left: 20px;overflow: hidden;">
      <button class="button" style="float: left" @click="toAddCourseChapter()">
        <i class="el-icon-document-copy"></i>
        {{$t('action.addCourseChapter')}}
      </button>
      <button class="button" style="float: left" @click="toAddCourseSection(model,null)">
        <i class="el-icon-document"></i>
        {{$t('action.addCourseSection')}}
      </button>
    </div>
    <div class="courseSection" v-for="(d,index) in courseItemList" :key="index" v-if="reseted">
      <div v-if="d.itemType==1">
        <div class="row">
          <div class="courseSection-sname">
            {{d.chapterTitle}}
            <span class="courseSection-count">({{d.courseItemList.length ||0}}个小节)</span>
          </div>
          <div class="courseList-btn" style="width: 50%;">
            <span class="btn-normal" @click="toAddCourseChapter(d,index)">{{$t('action.delete')}}</span>
            <span class="btn-normal" @click="toAddCourseSection(d,d.id)">{{$t('action.addCourseSection')}}</span>
            <span class="btn-normal" v-show="index != 0"
                  @click="changeSortIndex(1,courseItemList,index)">{{$t('action.moveUp')}}</span>
            <span class="btn-normal" v-show="index != courseItemList.length -1"
                  @click="changeSortIndex(2,courseItemList,index)">{{$t('action.moveDown')}}</span>
            <span class="btn-danger" @click="delCourseItem(d)">{{$t('action.delete')}}</span>
          </div>
        </div>
        <div class="courseSection-memo">{{d.chapterMemo}}</div>

        <div class="row courseSection-child" v-for="(n,_index) in d.courseItemList">
          <div class="courseSection-child-left">
            <div class="courseSection-no">{{_index+1}}</div>
            <div :class="'courseSection-flag flag' + n.resourceType">{{resourceType_map[n.resourceType].text}}</div>
            <div>
              <div class="courseSection-child-name">{{n.resourceName}}</div>
              <div class="courseSection-child-author">
                <img :src="user">
                {{n.supplierName || n.teacherName}}
              </div>
            </div>
          </div>
          <div class="courseList-btn">
            <span class="btn-danger" @click="delCourseItem(n)">{{$t('action.delete')}}</span>
            <span class="btn-normal" v-show="_index< d.courseItemList.length-1"
                  @click="changeSortIndex(2,d.courseItemList,_index)">{{$t('action.moveDown')}}</span>
            <span class="btn-normal" v-show="_index > 0" @click="changeSortIndex(1,d.courseItemList,_index)">{{$t('action.moveUp')}}</span>
          </div>
        </div>
      </div>

      <div class="row courseSection-child noborder" v-if="d.itemType==2">
        <div class="courseSection-child-left">
          <div :class="'courseSection-flag flag' + d.resourceType">{{resourceType_map[d.resourceType].text}}</div>
          <div>
            <div class="courseSection-child-name">{{d.resourceName}}</div>
            <div class="courseSection-child-author">
              <img :src="user">
              {{d.supplierName || d.teacherName}}
            </div>
          </div>
        </div>
        <div class="courseList-btn">
          <span class="btn-danger" @click="delCourseItem(d)">{{$t('action.delete')}}</span>
          <span class="btn-normal" v-show="index != courseItemList.length-1"
                @click="changeSortIndex(2,courseItemList,index)">{{$t('action.moveDown')}}</span>
          <span class="btn-normal" v-show="index != 0" @click="changeSortIndex(1,courseItemList,index)">{{$t('action.moveUp')}}</span>
        </div>
      </div>
    </div>
    <el-row>
      <el-button @click="close(false)">{{$t('action.cancel')}}</el-button>
      <el-button @click="preStep()">{{$t('action.preStep')}}</el-button>
      <el-button type="primary" @click="save()">{{$t('action.comfirm')}}</el-button>
      <el-button type="primary" @click="save(1)">{{$t('action.comfirmAndOnShelf')}}</el-button>
    </el-row>
    <AddChapter v-if="isShowAddChapter" :model="chapterModel" @closePop="addCourseChapter"></AddChapter>
    <AddSection v-if="isShowSection" @closePop="addCourseSection"></AddSection>
  </div>
</template>

<script>
  import AddChapter from "./AddChapter";
  import user from "@/assets/user.png"
  import AddSection from "./AddSection";
  import {mapState} from "vuex"

  export default {
    name: "CourseItemList",
    components: {AddSection, AddChapter},
    props: ["save", "close", "preStep"],
    data() {
      return {
        user: user,
        reseted: true,
        courseItemList: [
          {
            "id": 174,
            "itemType": 1,
            "parentItemId": null,
            "courseId": 46,
            "resourceId": null,
            "chapterMemo": "人类的起源1111",
            "sortIndex": 1,
            "chapterTitle": "第一章",
            "resourceType": null,
            "resourceName": null,
            "memo": null,
            "courseName": "论人的修养",
            "fileName": null,
            "fileType": null,
            "face": null,
            "teacherName": null,
            "headimg": null,
            "fileCode": null,
            "filePath": null,
            "courseItemList": [
              {
                "id": 175,
                "itemType": 2,
                "parentItemId": 174,
                "courseId": 46,
                "resourceId": 11,
                "chapterMemo": null,
                "sortIndex": 1,
                "chapterTitle": null,
                "resourceType": 1,
                "resourceName": "产品经理培训课01.mp4",
                "memo": null,
                "courseName": "论人的修养",
                "fileName": "mp4-1(1280x720).mp4",
                "fileType": 0,
                "face": "/upload/default/201030173726167.jpg",
                "teacherName": null,
                "headimg": null,
                "fileCode": "284a0754e2f6f4ec33075331506679a3_2",
                "filePath": null,
                "courseItemList": []
              },
              {
                "id": 175,
                "itemType": 2,
                "parentItemId": 174,
                "courseId": 46,
                "resourceId": 11,
                "chapterMemo": null,
                "sortIndex": 1,
                "chapterTitle": null,
                "resourceType": 1,
                "resourceName": "产品经理培训课02.mp4",
                "memo": null,
                "courseName": "论人的修养",
                "fileName": "mp4-1(1280x720).mp4",
                "fileType": 0,
                "face": "/upload/default/201030173726167.jpg",
                "teacherName": null,
                "headimg": null,
                "fileCode": "284a0754e2f6f4ec33075331506679a3_2",
                "filePath": null,
                "courseItemList": []
              },
            ]
          }, {
            "id": 228,
            "itemType": 2,
            "parentItemId": null,
            "courseId": 46,
            "resourceId": 33,
            "chapterMemo": null,
            "sortIndex": 2,
            "chapterTitle": null,
            "resourceType": 1,
            "resourceName": "vedio",
            "memo": null,
            "courseName": "论人的修养",
            "fileName": "海纳云后台界面(1).mp3",
            "fileType": 1,
            "face": "/platform/image/20201114/201114184310979.jpg",
            "teacherName": "徐魏魏",
            "headimg": "/upload/default/201114121316167.jpg",
            "fileCode": "284a0754e2787dbc9ccb9f1243d35101_2",
            "filePath": null,
            "courseItemList": []
          }],
        isShowAddChapter: false,
        isShowSection: false,
        chapterModel: {},
      };
    },
    computed: {
      ...mapState({
        resourceType_map: state => state.app.enumData.resourceType_map
      })
    },
    methods: {
      toAddCourseChapter(data) {
        this.chapterModel = data || {};
        this.isShowAddChapter = true;
      },
      addCourseChapter(data) {
        console.log(data)
        this.isShowAddChapter = false;
      },
      toAddCourseSection() {
        this.isShowSection = true;
      },
      addCourseSection(data) {
        console.log(data)
        this.isShowSection = false;
      },
      // 上移、下移
      changeSortIndex(type, list, index) {
        this.reseted = false;
        var changeItemList = [];
        if (type == 1) {
          if (index == 0) return;
          list[index - 1].sortIndex++;
          list[index].sortIndex--;

          var temp = list[index - 1];
          list[index - 1] = list[index];
          list[index] = temp;

          changeItemList = [
            {
              id: list[index - 1].id,
              sortIndex: list[index - 1].sortIndex
            },
            {
              id: list[index].id,
              sortIndex: list[index].sortIndex
            }
          ];

        } else if (type == 2) {
          if (index == list.length - 1) return;

          list[index + 1].sortIndex--;
          list[index].sortIndex++;

          var temp = list[index + 1];
          list[index + 1] = list[index];
          list[index] = temp;

          changeItemList = [
            {
              id: list[index + 1].id,
              sortIndex: list[index + 1].sortIndex
            },
            {
              id: list[index].id,
              sortIndex: list[index].sortIndex
            }
          ];
        }

        this.reseted = true;
        if (changeItemList.length == 0) return;
      },
      delCourseItem() {

      },
    }
  }
</script>

<style lang="scss" scoped>
  .button {
    border: none;
    background-color: white;
    color: #333;
    height: 38px;
    line-height: 38px;
    border-radius: 4px;
    box-shadow: #ccc 3px 3px 10px;
    margin-right: 15px;
  }

  .courseSection {
    margin: 20px;
    padding: 20px 20px 0;
    background-color: white;
    border-radius: 8px;
    font-family: "微软雅黑";
  }

  .courseSection-sname {
    width: 50%;
    font-weight: bold;
    font-size: 16px;
    text-align: left;
    display: inline-block;
  }

  .courseSection-count {
    font-size: 14px;
    color: #999;
    padding-left: 10px;
    font-weight: normal;
  }

  .courseSection-sname:before {
    content: " ";
    display: inline-block;
    width: 20px;
    height: 20px;
    /*background:url(../images/sj.png) no-repeat;*/
    background-size: 100% 100%;
    position: relative;
    top: 2px;
  }

  .courseSection-memo {
    color: #999;
    font-size: 14px;
    padding: 15px 0 15px 25px;
    line-height: 20px;
    text-align: left;
  }

  .courseSection-child-left {
    width: 60%;
    float: left;

    > div {
      float: left;
    }
  }

  .courseSection-child {
    border-top: 1px solid #e0e0e0;
    padding: 15px 0 10px 0;
    overflow: hidden;
  }

  .courseList-btn {
    width: 33%;
    float: right;
    vertical-align: top;

    span {
      display: inline-block;
      margin-right: 8px;
      font-size: 12px;
      min-width: 50px;
      box-sizing: border-box;
      text-align: center;
      padding: 2px 10px;
      background-color: #f0f0f0;
      border-radius: 3px;
      cursor: pointer;
      float: right;
    }

    span.btn-normal {
      color: #2a75ed;
    }

    span.btn-danger {
      color: #911b12;
    }
  }

  .courseSection-child.noborder {
    border: none;
    padding-top: 0;
  }

  .courseSection-no {
    width: 30px;
    text-align: center;
  }

  .courseSection-flag {
    font-size: 12px;
    background-color: #ebeef1;
    padding: 0 3px;
    display: inline-block;
    margin: 2px 10px;
    border-radius: 2px;
  }

  .courseSection-flag.flag1 {
    background-color: #e0eef5;
    color: #006ab5;
  }

  .courseSection-flag.flag2 {
    background-color: #e5f4ef;
    color: #29af74;
  }

  .courseSection-child-name {

  }

  .courseSection-child-author {
    height: 20px;
    line-height: 20px;
    color: #999;
    font-size: 12px;
    margin: 6px 0;
    text-align: left;

    img {
      width: 20px;
      height: 20px;
      float: left;
      margin-right: 10px;
    }
  }
</style>
